<template>
    <view class="main">
        <!-- #ifdef H5 -->
        <image class="back" src="../../static/orderInfoBack-h5.png" mode=""></image>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <image class="back" src="../../static/orderInfoBack-wx.png" mode=""></image>
        <!-- #endif -->
        <text class="statusDesc">{{orderInfo.status_zh}}</text>
        <view class="goodsContent">
            <image class="goodsImg" :src="orderInfo.img" mode=""></image>
            <text class="goodsTitle">{{orderInfo.title}}</text>
            <view class="clear"></view>
            <view class="priceContent">
                <view class="box">
                    <text class="label">商品金额</text>
                    <text class="number">{{orderInfo.old_price}}</text>
                    <view class="clear"></view>
                </view>
                <view class="box">
                    <text class="label">优惠券</text>
                    <text class="number">{{orderInfo.coupon_price}}</text>
                    <view class="clear"></view>
                </view>
                <view class="box">
                    <text class="label">返利金额</text>
                    <text class="number">{{orderInfo.promotion_amount}}</text>
                    <view class="clear"></view>
                </view>
            </view>
            <view class="realPrice">
                <text class="label">实付金额</text>
                <text class="number">{{orderInfo.order_amount}}</text>
                <view class="clear"></view>
            </view>
        </view>
        <view class="clear">

        </view>
        <view class="otherContent">
            <view class="box">
                <text class="label">订单编号：</text>
                <text class="font">{{orderInfo.order_sn}}</text>
            </view>
            <view class="box">
                <text class="label">下单时间：</text>
                <text class="font">{{orderInfo.order_create_time}}</text>
            </view>
            <view class="box">
                <text class="label" v-if="orderInfo.order_status==4">审核结果：</text>
                <text class="font">{{orderInfo.fail_reason}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        GetOrderInfo
    } from "@/services/OrderService"
    import {
        getTime
    } from "@/utils/utils"
    export default {
        data() {
            return {
                orderInfo: {
                    title: "",
                    status_zh: "",
                    order_status: 0,
                    img: "",
                    old_price: 0,
                    coupon_price: 0,
                    order_create_time: "",
                    promotion_amount: 0,
                    order_amount: 0,
                    order_sn: "",
                    fail_reason: ""
                }
            }
        },
        methods: {
            async asyncGetOrderInfo(orderId) {
                this.showLoading()
                let getOrderInfoRes = await GetOrderInfo({
                    timestamp: getTime(),
                    id: orderId
                });
                if (getOrderInfoRes.code == 0) {
                    this.hideLoading()
                    this.orderInfo = getOrderInfoRes.datas.info;
                } else {
                    this.hideLoading()
                    this.tostMsg("网络太慢，请求不到")
                    return false;
                }
            }
        },
        onLoad(e) {
            let orderId = e.id;
            if (Number(orderId) <= 0 || !orderId) {
                this.tostMsg('id异常', 'error');
                return false;
            }
            if (orderId) {
                this.asyncGetOrderInfo(orderId)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        background-color: #f3f4f5;

        .back {
            height: 202rpx;
            width: 100%;
        }

        .statusDesc {
            position: absolute;
            top: 70rpx;
            left: 100rpx;
            font-size: 26rpx;
            color: #fff;
        }

        .goodsContent {
            margin-top: 10rpx;
            width: 100%;
            background-color: #fff;

            .goodsImg {
                height: 150rpx;
                width: 150rpx;
                float: left;

                margin: {
                    top: 20rpx;
                    left: 20rpx;
                }

                ;
                border-radius: 10rpx;
            }

            .goodsTitle {
                display: block;
                border: 0rpx solid red;
                float: left;
                width: 74%;

                margin: {
                    left: 10rpx;
                    top: 30rpx;
                }

                ;
                max-height: 110rpx;
                overflow: hidden;
                color: #000;
                font-size: 28rpx;
            }

            .goodsPrice {
                display: inline-block;

                margin: {
                    left: 10rpx;
                    bottom: 50rpx;
                }

                border-bottom: 0rpx solid red;

                ;
                font-size: 32rpx;

                :before {
                    content: "￥";
                    font-size: 20rpx;
                }
            }

            .priceContent {
                padding-top: 20rpx;
                border-bottom: 1rpx solid #f3f4f5;
                border-top: 1rpx solid #f3f4f5;
                padding-bottom: 10rpx;
                background-color: #fff;
                margin-top: 20rpx !important;

                .box {
                    .label {
                        border: 0rpx solid red;

                        margin: {
                            left: 20rpx;
                            bottom: 10rpx;
                        }

                        ;
                        float: left;
                    }

                    .number {
                        float: right;
                        margin-right: 20rpx;

                        ::before {
                            content: "￥";
                            font-size: 20rpx;
                        }
                    }
                }

                .box:nth-child(2) {
                    border: 0rpx solid red;

                    .number {
                        color: red;

                        ::before {
                            content: "-￥";
                        }
                    }
                }
            }

            .realPrice {
                background-color: #fff;
                padding-top: 20rpx;
                padding-bottom: 20rpx;

                .label {
                    font-size: 34rpx;
                    border: 0rpx solid red;

                    margin: {
                        left: 20rpx;
                        bottom: 10rpx;
                    }

                    ;
                    float: left;
                }

                .number {
                    font-size: 34rpx;
                    color: red;
                    float: right;
                    margin-right: 20rpx;

                    ::before {
                        content: "￥";
                        font-size: 20rpx;
                    }
                }
            }
        }

        .otherContent {
            border: 0rpx solid red;
            background-color: #fff;
            margin-top: 20rpx;
            padding: 20rpx;

            .box {
                font-size: 24rpx;
                color: #999999;
                line-height: 50rpx;
            }

            .label {
                margin-right: 20rpx;
            }
        }
    }
</style>